<template>
  <t-modal
    :title="operateType == 1 ? '处理' : '详情'"
    width="900px"
    :visible="visible"
    @cancel="closeModal()"
    @ok="onSubmit()"
    wrapClassName="add-annotations-container"
    v-bind="footer"
    forceRender
    :confirmLoading="submitLoading"
  >
    <div class="curve-modal-body ">
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :hideRequiredMark="false"
      >
        <div class="sub-title">问题信息</div>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="图纸名称">
              <a-input v-model="form.cadName" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="图纸编号">
              <a-input v-model="form.cadCode" disabled></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="问题名称">
              <a-input
                v-model="form.issueName"
                disabled
                :title="form.issueName"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="问题类型">
              <a-select style="width: 100%" disabled v-model="form.issueType">
                <a-select-option
                  :value="item.dicItemCode"
                  v-for="item in issueTypeSoucre"
                  :key="item.dicItemCode"
                >
                  {{ item.dicItemName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="问题等级">
              <a-select style="width: 100%" disabled v-model="form.issueGrade">
                <a-select-option
                  :value="item.dicItemCode"
                  v-for="item in issueGradeSoucre"
                  :key="item.dicItemCode"
                >
                  {{ item.dicItemName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="期望修改时间">
              <a-input v-model="form.solveTime" disabled></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-form-model-item label="问题描述">
          <a-input type="textarea" v-model="form.issueDesc" disabled></a-input>
        </a-form-model-item>
        <a-form-model-item v-if="operateType == 1" label="图片">
          <div class="upload-img">
            <div
              class="file-list"
              v-for="(item, index) in form.files"
              :key="index"
            >
              <img :src="item" @click="previewImg(item)" title="点击预览" />
            </div>
          </div>
        </a-form-model-item>
        <a-form-model-item label="备注">
          <a-input type="textarea" v-model="form.remark" disabled></a-input>
        </a-form-model-item>
        <!--  -->
        <template v-if="operateType == 1">
          <a-row :gutter="0">
            <a-col :span="12">
              <a-form-model-item label="提交人">
                <a-input v-model="form.creator" disabled></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="提交单位">
                <a-input v-model="form.creatorOrg" disabled></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-form-model-item label="提交时间">
            <a-input v-model="form.createTime" disabled></a-input>
          </a-form-model-item>
        </template>
        <!--  -->
        <div class="sub-title">处理信息</div>
        <a-form-model-item
          label="处理意见"
          prop="dealOpinion"
          :rules="{
            required: operateType == 1 ? true : false,
            message: '请选择文件',
          }"
        >
          <a-input
            type="textarea"
            v-model="form.dealOpinion"
            placeholder="请输入"
            :disabled="operateType == 1 ? false : true"
          ></a-input>
        </a-form-model-item>
        <!--  -->
        <template v-if="operateType == 2 || operateType == 3">
          <a-row :gutter="0">
            <a-col :span="12">
              <a-form-model-item label="处理人">
                <a-input v-model="form.dealUser" disabled></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="处理时间">
                <a-input v-model="form.dealTime" disabled></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
        </template>
        <!--  -->
        <a-form-model-item
          label="文件"
          prop="dealImage"
          :rules="{
            required: operateType == 1 ? true : false,
            message: '请选择文件',
          }"
        >
          <bjUploadFile
            :viewMode="operateType == 1 ? false : true"
            :count="20"
            v-model="form.dealImage"
            @preview="viewFile($event)"
            @download="downloadFile($event)"
            @change="handleUpLoadFile($event, 'dealImage')"
            :replaceFields="{
              fileName: 'fileName',
              fileSize: 'fileSize',
              fileType: 'fileType',
            }"
          ></bjUploadFile>
        </a-form-model-item>
        <!-- 审批信息 -->
        <template v-if="operateType == 3">
          <div class="sub-title">审批信息</div>
          <a-form-model-item
            label="审批结果"
            prop="operate"
            :rules="{
              required: true,
              message: '请选择审批结果',
            }"
          >
            <a-radio-group v-model="form.operate">
              <a-radio :value="2">
                通过
              </a-radio>
              <a-radio :value="3">
                驳回
              </a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="审批意见" prop="reason">
            <a-textarea placeholder="请输入" :rows="4" v-model="form.reason" />
          </a-form-model-item>
        </template>
      </a-form-model>
    </div>
    <!-- 图片预览弹窗 -->
    <previewImage
      :imgSrc="imgPreview"
      :visible.sync="imgVisible"
    ></previewImage>
    <!-- 附件预览弹窗 -->
    <previewModal
      ref="previewModal"
      :visible.sync="previewModal.visible"
      :loading="previewModal.loading"
    ></previewModal>
  </t-modal>
</template>

<script>
import { mapGetters } from "vuex";
import { axios } from "@/utils/request";
import { getToken, downloadDfs } from "@/utils/TopVUI";
//
import previewImage from "@/components/TopVUI/custom/previewImage";
//普通附件上传
import bjUploadFile from "@/components/extendCustom/bj-upload-file";
//预览
import previewModal from "@/pages/document/minio/previewModal";
import { getDicItemByCode } from "@/api/common.js";
import { detailAnnotations, saveIssueAnnotations } from "@/api/design";
export default {
  inject: ["drawingModel"],
  components: {
    previewImage,
    bjUploadFile,
    previewModal,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    //1处理 2详情 3审批
    operateType: {
      type: [String, Number],
      default: "1",
    },
    parameter: {
      type: Object,
      default() {
        return {};
      },
    },
    footer: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      //问题类型
      issueTypeSoucre: [],
      //问题等级
      issueGradeSoucre: [],
      //预览
      previewModal: {
        visible: false,
        loading: false,
      },
      submitLoading: false,
      form: {
        uuid: "",
        //最外层数据id
        drawingReviewUuid: "",
        //图纸id
        cadFileUuid: "",
        //图纸名称
        cadName: "",
        //图纸编号
        cadCode: "",
        //问题名称
        issueName: "",
        //问题类型
        issueType: undefined,
        //问题等级
        issueGrade: undefined,
        //期望修改时间
        solveTime: "",
        //问题描述
        issueDesc: "",
        //图片
        files: [],
        //备注
        remark: "",
        //创建人
        creator: "",
        //创建单位
        creatorOrg: "",
        //创建时间
        createTime: "",
        //处理意见
        dealOpinion: "",
        //文件
        dealImage: [],
        //处理时间
        dealTime: "",
        //处理人
        dealUser: "",
        //审批意见
        operate: 2,
        //审批结果
        reason: "",
      },
      rules: {},
      //图片预览弹窗
      imgVisible: false,
      imgPreview: "",
    };
  },
  computed: {
    ...mapGetters(["configData"]),
    kkFileView() {
      let index = this.configData.findIndex(
        (item) => item.code === "kkFileView"
      );
      if (index >= 0) {
        return this.configData[index].value;
      } else {
        return "http://192.168.1.216:8012/onlinePreview";
      }
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getData();
        }
      },
      immediate: true,
    },
  },

  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          let { operateType } = this;
          //处理
          if (operateType == 1) {
            this.handleSaveData();
          }
          //审批
          if (operateType == 3) {
            this.approveSaveData();
          }
        }
      });
    },
    //处理
    handleSaveData() {
      let { form } = this;
      //审批
      //变更文件
      const fileList = form.dealImage.map(
        ({ $$DataType, file, loading, ...keepAttrs }) => keepAttrs
      );
      let formJson = {
        uuid: form.uuid,
        //处理意见
        dealOpinion: form.dealOpinion,
        //文件
        dealImage: JSON.stringify(fileList),
      };
      this.submitLoading = true;
      saveIssueAnnotations(formJson)
        .then((res) => {
          if (res.statusCode === 200 || res === 1) {
            this.$message.success("处理成功", 1.5);
            this.closeModal();
            this.$emit("onRefresh");
          } else {
            this.$message.error(res?.message ?? "处理失败");
          }
        })
        .catch((_) => {})
        .finally((_) => {
          this.submitLoading = false;
        });
    },
    //审批
    approveSaveData() {
      let { form } = this;
      let formJson = {
        uuid: form.uuid,
        //审批意见
        operate: form.operate,
        //审批结果
        reason: form.reason,
      };
      this.submitLoading = true;
      axios
        .post(`/probusiness/drawingReviewComment/approveData`, formJson, {
          headers: {
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          if (res.statusCode === 200 || res === 1) {
            this.$message.success("审批成功", 1.5);
            this.closeModal();
            this.$emit("onRefresh");
          } else {
            this.$message.error(res?.message ?? "审批失败");
          }
        })
        .catch((_) => {})
        .finally((_) => {
          this.submitLoading = false;
        });
    },
    //下载
    downloadFile(row) {
      let { url } = row;
      downloadDfs(url);
    },

    //预览
    viewFile(file) {
      let { url } = file;
      this.previewModal.loading = true;
      this.$refs.previewModal.type = "file";
      this.$refs.previewModal.fileUrl =
        this.kkFileView +
        "/onlinePreview?url=" +
        encodeURIComponent(Base64.encode(url)) +
        "&watermarkTxt=" +
        //水印内容
        encodeURIComponent("") +
        "&token=" +
        getToken();
      this.previewModal.visible = true;
      this.previewModal.loading = false;
    },

    //上传附件
    handleUpLoadFile({ file, index }, domain) {
      let formData = new FormData();
      formData.append("bucket", "yx-cloud-vue");
      formData.append("file", file);
      this.$set(this.form[domain][index], "loading", true);
      axios
        .post(`/document/minio/uploadfile`, formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => {
          this.$set(this.form[domain][index], "dfsFileUuid", res.dfsFileUuid);
          this.$set(this.form[domain][index], "url", res.url);
        })
        .catch((_) => {
          this.$set(this.form[domain][index], "fail", true);
        })
        .finally((_) => {
          this.$set(this.form[domain][index], "loading", false);
        });
    },

    async getData() {
      //问题类型
      this.issueTypeSoucre = await this.getDicCodeData("issueTypeSJ");
      //问题等级
      this.issueGradeSoucre = await this.getDicCodeData("issueGrade");
      await this.getDetail();
    },

    //查询字典表
    getDicCodeData(dicCode = "") {
      return new Promise((resolve, reject) => {
        getDicItemByCode({ code: dicCode })
          .then((res) => {
            let { data } = res;
            resolve(data);
          })
          .catch((_) => {
            reject();
          })
          .finally((_) => {});
      });
    },

    //详情
    getDetail() {
      let { uuid } = this.parameter;
      let { operateType } = this;
      detailAnnotations({ uuid })
        .then((res) => {
          let { data } = res;
          this.form = {
            //id
            uuid: data.uuid,
            //图纸名称
            cadName: data?.cadName ?? "",
            //图纸编号
            cadCode: data?.cadCode ?? "",
            //问题名称
            issueName: data?.issueName ?? "",
            //问题类型
            issueType: data?.issueType ?? undefined,
            //问题等级
            issueGrade: data?.issueGrade ?? undefined,
            //期望修改时间
            solveTime: data?.solveTime,
            //问题描述
            issueDesc: data?.issueDesc ?? "",
            //图片
            files: data?.dealImages ?? [],
            //备注
            remark: data?.remark ?? "",
            //创建人
            creator: data?.creator ?? "",
            //创建单位
            creatorOrg: data?.creatorOrg ?? "",
            //创建时间
            createTime: data?.createTime ?? "",
            //处理意见
            dealOpinion: data?.dealOpinion ?? "",
            //处理时间
            dealTime: data?.dealTime ?? "",
            //处理人
            dealUser: data?.dealUser ?? "",
            //文件
            dealImage: JSON.parse(data?.dealImage ?? "[]"),
            //审批意见
            operate: 2,
            //审批结果
            reason: "",
          };
          //   //详情
          //   if (operateType == 2) {
          //     this.form.dealOpinion = data?.dealOpinion ?? "";
          //     this.form.dealTime = data?.dealTime ?? "";
          //     this.form.dealUser = data?.dealUser ?? "";
          //     this.form.dealImage = JSON.parse(data?.dealImage ?? "[]");
          //   }
        })
        .catch((_) => {});
    },

    //预览
    previewImg(data) {
      this.imgPreview = data;
      this.imgVisible = true;
    },

    //重置表单
    resetForm() {
      this.form = {
        uuid: "",
        //最外层数据id
        drawingReviewUuid: "",
        //图纸id
        cadFileUuid: "",
        //图纸名称
        cadName: "",
        //图纸编号
        cadCode: "",
        //问题名称
        issueName: "",
        //问题类型
        issueType: undefined,
        //问题等级
        issueGrade: undefined,
        //期望修改时间
        solveTime: "",
        //问题描述
        issueDesc: "",
        //图片
        files: [],
        //备注
        remark: "",
        //创建人
        creator: "",
        //创建单位
        creatorOrg: "",
        //创建时间
        createTime: "",
        //处理意见
        dealOpinion: "",
        //文件
        dealImage: [],
        //处理时间
        dealTime: "",
        //处理人
        dealUser: "",
        //审批意见
        operate: 2,
        //审批结果
        reason: "",
      };
      this.$refs.ruleForm.clearValidate();
    },

    //关闭
    closeModal() {
      this.resetForm();
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.add-annotations-container {
  .ant-modal-body {
    padding: 0 !important;
    .curve-modal-body {
      box-sizing: border-box;
      padding: 14px 70px 14px 40px;
      max-height: 700px;
      overflow: auto;

      .upload-img {
        display: flex;
        flex-wrap: wrap;
        .upload-button {
          display: flex;
          width: 110px;
          height: 110px;
          border-radius: 6px;
          background: #fafafa;
          border: 1px dashed #d9d9d9;
          cursor: pointer;
          align-items: center;
          justify-content: center;
          margin-right: 8px;
          flex-direction: column;
          .anticon-plus {
            font-size: 26px;
          }
        }
        .file-list {
          width: 110px;
          height: 110px;
          background: #fafafa;
          border-radius: 6px 6px 6px 6px;
          border: 1px solid #d9d9d9;
          margin: 0 8px 8px 0;
          position: relative;
          img {
            cursor: pointer;
            height: 100%;
            width: 100%;
            object-fit: contain;
          }
          .delete-button {
            position: absolute;
            width: 24px;
            height: 20px;
            background: #ff2d2d;
            border-radius: 0px 6px 0px 20px;
            opacity: 0.6;
            top: 0;
            right: 0;
            cursor: pointer;
            z-index: 99;
            .anticon-close {
              position: relative;
              top: -10px;
              right: -8px;
              font-size: 12px;
              color: #ffffff;
            }
          }
        }
      }
      .ant-form-item {
        display: flex;
        .ant-form-item-label {
          flex-shrink: 0;
          width: 100px;
        }
        .ant-form-item-control-wrapper {
          flex: 1;
          overflow: hidden;
        }
      }
      .bj-upload-file {
        .choosed-file-warp {
          width: 100%;
        }
      }
      .sub-title {
        padding-left: 30px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #525a5d;
        position: relative;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        &::after {
          content: "";
          width: 3px;
          height: 16px;
          background: #1890ff;
          position: absolute;
          left: 14px;
          top: 50%;
          transform: translateY(-50%);
        }
        .ant-btn {
          margin-right: 0;
        }
      }
    }
  }
}
</style>
